<template>
  <div>
    <el-card class="header-card-box">
      <div class="header">
        <Describe :describe="value" />
        <div class="action">
          <span>
            <el-button type="primary"
                       @click="handerClose">合约关闭</el-button>
          </span>
          <span class="cancel">
            <el-button plain
                       @click="cancel">取消</el-button>
          </span>
        </div>
      </div>
      <el-dialog title="提示"
                 :visible.sync="dialogVisible"
                 width="400px"
                 :before-close="handleClose">
        <div class="contract-close-wrap">
          <el-form ref="ruleForm"
                   :model="ruleForm"
                   :rules="rules"
                   label-width="100px"
                   class="demo-ruleForm">
            <el-form-item prop="reason"
                          class="item-width"
                          label="关闭原因">
              <nr-select v-model="ruleForm.reason"
                         :options="contractClosecause"
                         :props="{ label: 'label', value: 'value' }"
                         placeholder="请选择合约关闭原因" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="handleSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import quotationApi from "@/api/modules/quotation";
import nrSelect from "@/components/nr/select/Index";
import Describe from './Describe.vue'

export default {
  name: 'DraftHeader',
  components: { nrSelect, Describe },
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      dialogVisible: false,
      ruleForm: {},
      contractClosecause: [
        { label: "合约价格有误", value: "合约价格有误" },
        { label: "合约价格调整", value: "合约价格调整" }
      ],
      rules: {
        reason: [
          { required: true, message: "请选择合约关闭原因", trigger: "change" }
        ]
      },
    }
  },
  computed: {
    values () {
      return this.value
    }
  },
  methods: {
    cancel () {
      this.$router.go(-1)
    },
    handerClose () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    async handleSubmit () {
      let params = {
        templateId: this.values.templateId,
        reason: this.ruleForm.reason
      }
      await quotationApi.contractClose(params)
      this.$message.success('操作成功')
      this.cancel()
    }
  }
}
</script>

<style scoped>
.header {
  height: 32px;
  line-height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-dropdown {
  /* padding: 0 10px; */
  padding-left: 10px;
}
.cancel {
  padding-left: 10px;
}
.action {
  /* display: flex; */
  width: 30%;
  text-align: end;
}
</style>